<template>

  <el-container>
    <el-header>
      <navi-bar></navi-bar>
      <div class="UserStatus">
        <el-row>
          <el-button type="primary" @click="visual = true" round>{{login}}</el-button>
          <el-button type="success" @click="rvisual = true" round>{{register}}</el-button>
        </el-row>
      </div>
    </el-header>
    <el-container>
      <el-aside max-height="100vh">
        <contest-slider v-for="(value, key, index) in Competitions" :key="key" :Contests="value" :Name="CompNames[index]">
        </contest-slider>
      </el-aside>
      <el-container>
        <el-main>
          <pic-carousel></pic-carousel>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
    <el-drawer title="" :before-close="HandleClose" :visible.sync="visual" :direction="drawertype"
      custom-class="login-drawer" ref="drawerForm" :with-header="false">
      <div :class="drawercontentstyle">
        <el-form :model="logininput" size="small" status-icon :ref="loginRefName">
          <el-form-item prop="loginuserName" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
            <el-col :span="24">
              <el-input v-model="logininput.loginuserName" autocomplete="off" placeholder="用户名"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item prop="loginpassWord" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
            <!--:rules="passrules"-->
            <el-col :span="24">
              <el-input type="password" v-model="logininput.loginpassWord" autocomplete="off" placeholder="密码">
              </el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div class="drawer-footer">
          <el-button @click="exitForm(false)" round size="small">取 消</el-button>
          <el-button type="primary" size="small" @click="$refs.drawerForm.closeDrawer()" :loading="loading" round>{{
          loading ? '登陆中 ...' : '登 录' }}</el-button>
        </div>
      </div>
    </el-drawer>
    <el-drawer title="" :before-close="HandleRegClose" :visible.sync="rvisual" :direction="rdrawertype"
      custom-class="reg-drawer" ref="RegdrawerForm" :with-header="false">
      <div :class="rdrawercontentstyle">
        <el-form :model="input" size="small" status-icon :ref="regRefName" :rules="globalrules">
          <el-form-item prop="userName" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
            <!--:rules="userrules"-->
            <el-col :span="24">
              <el-input v-model="input.userName" autocomplete="off" placeholder="用户名"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item prop="passWord">
            <!--:rules="passrules"-->
            <el-col :span="24">
              <el-input type="password" v-model="input.passWord" autocomplete="off" placeholder="密码"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item prop="confirmpwd">
            <el-col :span="24">
              <el-input type="password" v-model="input.confirmpwd" autocomplete="off" placeholder="确认密码"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item prop="email" :rules="[
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change']}]">
            <!--:rules="emailrules"-->
            <el-col :span="24">
              <el-input v-model="input.email" autocomplete="off" placeholder="邮箱"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div class="drawer-footer">
          <el-button @click="exitForm(true)" round>取 消</el-button>
          <el-button type="primary" @click="$refs.RegdrawerForm.closeDrawer()" :loading="rloading" round>{{ rloading ?
          '注册中 ...' : '注 册' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </el-container>


</template>

<script>

import Navigator from './Navi.vue'
import ContestSlide from './ContestSlide.vue'
import PicCarousel from './PicCarousel.vue'
import axios from 'axios'

export default {
  name: 'whole-page',
  components: {
    'navi-bar': Navigator,
    'contest-slider': ContestSlide,
    'pic-carousel': PicCarousel
  },
  data() {

    var pwdvalidator = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.input.passWord !== '') {
          this.$refs.registerForm.validateField('confirmpwd');
        }
        callback();
      }
    };
    var confirmvalidator = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.input.passWord) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      login: "登录",
      register: "注册",
      input: {
        userName: '',
        passWord: '',
        confirmpwd: '',
        email: ''
      },
      logininput: {
        loginuserName: '',
        loginpassWord: ''
      },
      loading: false,
      visual: false,
      drawertype: 'ttb',
      rvisual: false,
      rdrawertype: 'ltr',
      rloading: false,
      globalrules: {
        passWord: [
          { validator: pwdvalidator, trigger: ['blur', 'change'] }
        ],
        confirmpwd: [
          { validator: confirmvalidator, trigger: ['blur', 'change'] }
        ]
      },
      Competitions: {
        contst_01: {
          起始日期: '2022-10-08',
          结束日期: '2022-11-22'
        },
        contst_02: {
          起始日期: '2022-11-01',
          结束日期: '2023-01-09'
        },
        contst_03: {
          起始日期: '2022-10-19',
          结束日期: '2022-12-21'
        },
        contst_04: {
          起始日期: '2022-11-22',
          结束日期: '2023-1-22'
        }
      },
      CompNames: [
        '2022-蓝桥杯', '2022-ACM', '2022-IO', '2022-安途杯'
      ],
      alertFailMsgs: {
        regInputFailAlert: {
          message: '注册失败',
          err: '错误：输入格式错误'
        },
        loginInputFailAlert: {
          message: '登录失败',
          err: '错误：输入格式错误'
        },
        regFailAlert: {
          message: '注册失败',
          err: '错误：输入的信息有误'
        },
        loginFailAlert: {
          message: '登陆失败',
          err: '错误：用户不存在'
        },
        styleObj: {
          iconClass: "el-icon-error",
          confirmButtonText: "确认",
          showClose: true,
          type: 'error'
        }
      },
      alertSucMsgs: {
        regSuccessAlert: {
          message: '注册成功',
          title: '提示'
        },
        loginSuccessAlert: {
          message: '登录成功',
          title: '提示'
        },
        styleObj: {
          iconClass: "el-icon-success",
          confirmButtonText: "确认",
          showClose: true,
          type: 'success'
        }
      },
      regRefName: 'registerForm',
      loginRefName: 'loginForm'
    }
  },
  computed: {
    drawercontentstyle() {
      return {
        'drawer-content-tb': this.drawertype === 'ttb' || this.drawertype === 'btt',
        'drawer-content-lr': this.drawertype === 'ltr' || this.drawertype === 'rtl'
      }
    },
    rdrawercontentstyle() {
      return {
        'reg-drawer-content-tb': this.rdrawertype === 'ttb' || this.rdrawertype === 'btt',
        'reg-drawer-content-lr': this.rdrawertype === 'ltr' || this.rdrawertype === 'rtl'
      }
    }
  },
  methods: {
    HandleRegClose(done) {
      if (this.rloading) return;

      this.$confirm("确定提交表单吗？")
        .then(() => {
          this.rloading = true

          setTimeout(() => {

            this.$refs["registerForm"].validate((valid) => {

              if (valid) {
                this.rsubmit(done)
              }
              else {
                console.log('format error')
                this.$confirm(this.alertFailMsgs.regInputFailAlert.message,
                  this.alertFailMsgs.regInputFailAlert.err,
                  this.alertFailMsgs.styleObj)
                  .then(() => {
                    done()
                    this.exitForm(true)
                  })
                  .catch(err => {
                    done()
                    this.exitForm(true)
                    console.log(err)
                  })
                return false
              }

            })

          }, 2000);

        })
        .catch((err) => {
          done()
          this.exitForm(true)
          console.log(err)
        })
    },
    HandleClose(done) {
      if (this.loading) return;

      this.$confirm("确定提交表单吗？")
        .then(() => {
          this.loading = true

          setTimeout(() => {

            this.$refs["loginForm"].validate((valid) => {

              if (valid) {
                this.submit(done)
              }
              else {
                console.log('format error')
                this.$confirm(this.alertFailMsgs.loginInputFailAlert.message,
                  this.alertFailMsgs.loginInputFailAlert.err,
                  this.alertFailMsgs.styleObj)
                  .then(() => {
                    done()
                    this.exitForm(false)
                  })
                  .catch(err => {
                    done()
                    this.exitForm(false)
                    console.log(err)
                  })
                return false
              }

            })

          }, 2000);

        })
        .catch((err) => {
          this.exitForm(false)
          console.log(err)
        })

    },
    exitForm(isreg) {
      if (isreg) this.$refs['registerForm'].resetFields()
      else this.$refs['loginForm'].resetFields()
      this.loading = false
      this.visual = false
      this.rloading = false
      this.rvisual = false
    },
    submit(done) {

      axios.request({
        url: "/loginByUserName",
        method: "get",
        baseURL: "http://localhost:8088/",
        params: {
          username: this.logininput['loginuserName'],
          password: this.logininput['loginpassWord']
        }
      })
        .then(resp => {
          console.log(resp)
          if (resp != null)
            this.$confirm(this.alertSucMsgs.loginSuccessAlert.message,
              this.alertSucMsgs.loginSuccessAlert.title,
              this.alertSucMsgs.styleObj)
              .then(() => {
                done()
                this.exitForm(false)
              })
              .catch(err => {
                done()
                this.exitForm(false)
                console.log(err)
              })
          else
            this.$confirm(this.alertFailMsgs.loginFailAlert.message,
              this.alertFailMsgs.loginFailAlert.err,
              this.alertFailMsgs.styleObj)
              .then(() => {
                done()
                this.exitForm(false)
              })
              .catch(err => {
                done()
                this.exitForm(false)
                console.log(err)
              })
        })
        .catch(err => {
          this.$confirm(this.alertFailMsgs.loginFailAlert.message,
            this.alertFailMsgs.loginFailAlert.err,
            this.alertFailMsgs.styleObj)
            .then(() => {
              done()
              this.exitForm(false)
              console.log(err)
            })
            .catch(err => {
              done()
              this.exitForm(false)
              console.log(err)
            })
        })

    },
    rsubmit(done) {
      axios.request({
        url: "/register",
        method: "post",
        baseURL: "http://localhost:8088/",
        params: {
          username: this.input['userName'],
          password: this.input['passWord'],
          email: this.input['email']
        }
      })
        .then(resp => {
          if (resp != null)
            this.$confirm(this.alertSucMsgs.regSuccessAlert.message,
              this.alertSucMsgs.regSuccessAlert.title,
              this.alertSucMsgs.styleObj)
              .then(() => {
                done()
                this.exitForm(true)
              })
              .catch(err => {
                done()
                this.exitForm(true)
                console.log(err)
              })
          else
            this.$confirm(this.alertFailMsgs.regFailAlert.message,
              this.alertFailMsgs.regFailAlert.err,
              this.alertFailMsgs.styleObj)
              .then(() => {
                done()
                this.exitForm(true)
              })
              .catch(err => {
                done()
                this.exitForm(true)
                console.log(err)
              })
        })
        .catch(err => {
          this.$confirm(this.alertFailMsgs.regFailAlert.message,
            this.alertFailMsgs.regFailAlert.err,
            this.alertFailMsgs.styleObj)
            .then(() => {
              done()
              this.exitForm(true)
              console.log(err)
            })
            .catch(err => {
              done()
              this.exitForm(true)
              console.log(err)
            })
        })
    }
  }
}

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.reg-drawer-content-tb {
  margin: 20px 50px;
  text-align: center;
  padding: 25px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.reg-drawer-content-lr {
  margin: 50px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 90vh;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 45vh;
  padding-bottom: 45vh;
}

.drawer-content-tb {
  margin: 20px 50px;
  text-align: center;
  padding: 25px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.drawer-content-lr {
  margin: 50px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 90vh;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 45vh;
  padding-bottom: 45vh;
}

.el-header>ul {
  position: absolute;
  width: 100%;
}

.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-header {
  text-align: right;
  padding-right: 20px;
  padding-left: 0;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.UserStatus {
  position: absolute;
  right: 20px;
}
</style>
